import { ExtractPropTypes, PropType } from 'vue'
import { validatorColorValue } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'
import { isArray } from '../../utils'

/**
 * props参数
 */
export const collapseProps = {
  /** 当前打开的面板序号 */
  modelValue: {
    type: [Array, String, Number],
    default: () => {
      return []
    }
  },
  /** 手风琴模式 */
  accordion: {
    type: Boolean,
    default: true
  },
  /** 显示箭头 */
  arrow: {
    type: Boolean,
    default: true
  },
  /** 箭头颜色, 当arrow为true时生效 */
  arrowColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 点击时的样式 */
  hoverClass: {
    type: String,
    default: 'tn-hover'
  },
  /** collapse-item自定义样式 */
  itemStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** collapse-item头部自定义样式 */
  headStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 激活时collapse-item头部自定义样式 */
  activeHeadStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** collapse-item内容自定义样式 */
  contentStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 激活时collapse-item内容自定义样式 */
  activeContentStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
}
export type CollapseProps = ExtractPropTypes<typeof collapseProps>

export const collapseEmits = {
  /** 点击修改事件 */
  [UPDATE_MODEL_EVENT]: 
    (value: string | number | (string | number)[]) => typeof value === 'string' || typeof value === 'number' || isArray(value),
  change: 
  (value: string | number | (string | number)[]) => typeof value === 'string' || typeof value === 'number' || isArray(value)
}
export type CollapseEmits = typeof collapseEmits
